.drawer {
    .drawer-contents {
        position: absolute;
        right: 0;
        top: 0;
        width: 300px;
        height: 100%;
        z-index: $zindex-controls-drawer;
        background: white;
    }

    .drawer-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.1);
        z-index: $zindex-controls-backdrop;
    }
}

@keyframes drawer-backdrop-enter {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes drawer-backdrop-exit {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes drawer-contents-enter {
    0% {
        transform: translate(301px, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes drawer-contents-exit {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(301px, 0);
    }
}
